<template>
  <view class="news-page">
    <view class="page-title">新闻列表</view>
    <view class="news-list">
      <!-- 循环渲染新闻卡片 -->
      <news-card 
        v-for="(item, index) in newsList" 
        :key="item.id" 
        :news="item"
        @click="handleNewsClick(item)"
      ></news-card>
    </view>
  </view>
</template>

<script>
// 引入自定义组件
import newsCard from '../../../components/NewsCard.vue'

export default {
  components: {
    newsCard
  },
  data() {
    return {
      // 新闻数据数组（根据图片内容调整）
      newsList: [
        {
          id: 1,
          title: "14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
          source: "界面新闻",
          comments: "56",
          time: "2025.10.07",
          isTop: true,
          tags: []
        },
        {
          id: 2,
          title: "把握历史大势 共创美好未来（观沧海）",
          source: "人民日报",
          comments: "1025",
          time: "2025.10.25",
          isTop: false,
          tags: []
        },
        {
          id: 3,
          title: "黄金还能走多远？卖方高呼“第三浪启动”，230多份研报看好",
          source: "财联社",
          comments: "452",
          time: "2025.10.08",
          isTop: false,
          tags: ["搜索：今日金价", "隔夜外盘"]
        },
        {
          id: 4,
          title: "\"没有短板\"的完美战鹰！歼-16机库独家探访",
          source: "红星新闻",
          comments: "56",
          time: "2025.10.07",
          isTop: false,
          tags: []
        },
        {
          id: 5,
          title: "多国学者共探巴克特里亚考古 携手推进丝绸之路文明研究新进程",
          source: "中国日报网",
          comments: "56",
          time: "2025.10.12",
          isTop: false,
          tags: []
        }
      ]
    }
  },
  methods: {
    // 处理新闻点击事件
    handleNewsClick(news) {
      uni.showToast({
        title: `点击了${news.title}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.news-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 24rpx 16rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.news-list {
  background-color: #fff;
  margin-top: 16rpx;
}
</style>